<template>
  <div class="hectiue">
     <el-button class="cheaback" type="text" icon="el-icon-back" @click="hback"
      >返回</el-button
    >
    <h4>用户信息</h4>
    <el-row>
  <el-col :span="5"><div class="grid-content "></div>用户账号:{{tableData.userId}}</el-col>
  <el-col :span="5"><div class="grid-content "></div>用户昵称:{{tableData.tableData}}</el-col>
  <el-col :span="5"><div class="grid-content "></div>邀请好友数量:{{tableData.shareNumber}}</el-col>
  <el-col :span="5"><div class="grid-content "></div>成功交易好友数量:{{tableData.treadSuccessNumber}}</el-col>
  <el-col :span="5"><div class="grid-content "></div>积累奖励:{{tableData.totalCommissionAmount}}</el-col>
    </el-row>
   <h3>邀请新用户记录</h3>
   <el-form :model="form">
    <el-form-item label="注册时间">
        <el-date-picker
            v-model="form.value1"
            type="month"
            placeholder="选择日期"
          >
          </el-date-picker>
    </el-form-item>
    <el-form-item label="成功交易状态">
    <el-select v-model="form.region">
      <el-option label="是" value="true"></el-option>
      <el-option label="否" value="false"></el-option>
    </el-select>
    </el-form-item>
   <el-button style="background-color: #ff7144; color: #fff" @click="xhietm"
          >搜索</el-button
        >
        <el-button class="acctive" @click="addcit">重置</el-button>
   </el-form>
   <el-table :data="list" style="width: 100%">
    <el-table-column
        prop="shareUserId"
        label="用户Id"
        style="width: 20%">
      </el-table-column>
       <el-table-column
        prop="shareUserName"
        label="用户昵称"
        style="width: 20%">
      </el-table-column>
       <el-table-column
        prop="shareTime"
        label="注册时间"
        style="width: 20%">
      </el-table-column>
       <el-table-column
        prop="placeOrder"
        label="成功交易状态"
        style="width: 20%">
        <template v-slot="{row}">
           {{ fundasdr(row.placeOrder) }}
        </template>
      </el-table-column>
   </el-table>
       <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="2"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
  </div>
</template>

<script>
import {userdetail} from '@/api/user'
import  employeesConst  from "@/constant/employees";
const hireTypeMape = {};

employeesConst.hireTypeshd.forEach((item) => {
  hireTypeMape[item.placeOrder] = item.value;
});

export default {
  data () {
    return {
      list:[],
          form:{
             sg:'',
            region:'',
            value1:'',
          },
          q:{
        index:1,
        size:10,
        userId:null,
        isPlaceOrder:'',
        startTime: "",
        endTime:''
          }
    }
  },
  created(){
    this.loachengtr()
  },
  methods:{
   async loachengtr(){
   this.tableData = this.$route.query.row;
       this.q.userId = this.tableData.userId
    const res = await userdetail(this.q)
    this.list = res.data.data
     this.list.forEach(item=>{
        item.shareTime=item.shareTime.slice(0,3).join('-')
        console.log(item.shareTime);
       })
    },
    // 搜索
    xhietm(){
      this.q.isPlaceOrder = this.form.region
  if(this.form.value1){
        let date = new Date(this.form.value1);
       let Yr = date.getFullYear()
      // this.timer.push(Yr)
       let Mn = date.getMonth()+1
      
      if(Mn<10){
        Mn="0"+Mn
      }

      // this.timer.push(Mn)
      // this.timer.push(My)
      this.form.value1 = Yr+'-'+Mn+'-'+'01'+" "+'00'+':'+'00'+':'+'00'
      this.form.sg = Yr+'-'+Mn+'-'+'31'+" "+'23'+':'+'59'+':'+'59'
      // this.form.value1 = this.timer.join('-') +''+''+'00'+':'+'00'+':'+'00'
        this.q.startTime = this.form.value1
        this.q.endTime = this.form.sg
  }
         this.loachengtr()
    },
    // 重置
    addcit(){
      this.q.index = 1
      this.q.isPlaceOrder = ''
      this.q.startTime = ''
      this.q.endTime = ''
      this.form.sg = ''
      this.form.region = ''
      this.form.value1 = ''
      this.loachengtr()
    },
      fundasdr(code) {
      return hireTypeMape[code];
    },
            // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachengtr();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachengtr();
    },
    hback(){
      this.$router.back()
    }
  }
};
</script>

<style scoped>
.hectiue {
  background-color: #fff;
  padding: 10px 10px 10px 50px;
}
  .grid-content {
    border-radius: 3px;
    min-height: 36px;
  }
  .el-col-5 {
    width: 19%;
    margin-bottom: 3%;
  }
  .el-row{
    border-bottom: 1px solid #E3E5E8;
  }
  .el-input{
    width: 65%;  
  }
  .el-form-item{
     display: inline-block;
     width: 320px;
  }
</style>
